<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
	<style>
		 ::-webkit-scrollbar-thumb {
		  background:#a2a2a2; 
		  border-radius: 10px;
		  height:50%;
		
		::-webkit-scrollbar{width:6px;}
			body{
				overflow-y: scroll;
			} 
	</style>
<script>
	$(document).ready(function() {
		$("#teamStaff").hide();
		var projectId=$("#projectId").val();
		initFormSelects("fkTeam","/app/customerTeam/selectjson/"+projectId,"");
	});
	
</script>
<style>
.layui-form-label{
	text-align:left
}
.kb-form-container{
	padding-left:20px;
}
.layui-form-item .layui-inline{
	margin-right:0px
}
</style>
</head>
<body style="overflow-y:scroll">

<div class="addemployee-wrap" id="employee-wrap">
	<div class="kb-form-container" >
		<form class="layui-form" id="defaultForm" th:action="@{/app/projectFieldTeam/save}" th:method="post" lay-filter="employee-form">
			<input type="hidden" name="fkField" id="fkField" th:value="${fkField}"/>
			<input type="hidden" name="fkProject" id="projectId" th:value="${id}"/>
			<fieldset class="fieldset">
				<div class="layui-form-item">
				    <label class="layui-form-label">预订日期</label>
				    <div class="layui-input-block">
				      	<input type="text" name="bookStartDate" id="bookStartDate" lay-verify="bookStartDate" placeholder="" autocomplete="off" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-inline">
					    <label class="layui-form-label">开始</label>
				        <div class="layui-input-inline" style="width: 200px;">
				        <input type="hidden" name="startTime" id="startTime"/>
				            <select id='start' name="start" lay-verify="start">
						        <option value="8,1">8:00</option>
						        <option value="8,2">8:30</option>
						        <option value="9,1">9:00</option>
						        <option value="9,2">9:30</option>
						        <option value="10,1">10:00</option>
						        <option value="10,2">10:30</option>
						        <option value="11,1">11:00</option>
						        <option value="11,2">11:30</option>
						        <option value="12,1">12:00</option>
						        <option value="12,2">12:30</option>
						        <option value="13,1">13:00</option>
						        <option value="13,2">13:30</option>
						        <option value="14,1">14:00</option>
						        <option value="14,2">14:30</option>
						        <option value="15,1">15:00</option>
						        <option value="15,2">15:30</option>
						        <option value="16,1">16:00</option>
						        <option value="16,2">16:30</option>
						        <option value="17,1">17:00</option>
						        <option value="17,2">17:30</option>
						        <option value="18,1">18:00</option>
						        <option value="18,2">18:30</option>
						        <option value="19,1">19:00</option>
						        <option value="19,2">19:30</option>
						        <option value="20,1">20:00</option>
						        <option value="20,2">20:30</option>
						        <option value="21,1">21:00</option>
						        <option value="21,2">21:30</option>
						        <option value="22,1">22:00</option>
						        <option value="22,2">22:30</option>
						        <option value="23,1">23:00</option>
						        <option value="23,2">23:30</option>
						        <option value="24,1">24:00</option>
						    </select>
				        </div>
				    </div>
				     <div class="layui-inline">
				        <label class="layui-form-label text-r" style="width: 80px;">结束</label>
				        <div class="layui-input-inline" style="width:200px;">
				        <input type="hidden" name="endTime" id="endTime"/>
				            <select id="end" name="end" lay-verify="end">
						        <option value="8,1">8:00</option>
						        <option value="8,2">8:30</option>
						        <option value="9,1">9:00</option>
						        <option value="9,2">9:30</option>
						        <option value="10,1">10:00</option>
						        <option value="10,2">10:30</option>
						        <option value="11,1">11:00</option>
						        <option value="11,2">11:30</option>
						        <option value="12,1">12:00</option>
						        <option value="12,2">12:30</option>
						        <option value="13,1">13:00</option>
						        <option value="13,2">13:30</option>
						        <option value="14,1">14:00</option>
						        <option value="14,2">14:30</option>
						        <option value="15,1">15:00</option>
						        <option value="15,2">15:30</option>
						        <option value="16,1">16:00</option>
						        <option value="16,2">16:30</option>
						        <option value="17,1">17:00</option>
						        <option value="17,2">17:30</option>
						        <option value="18,1">18:00</option>
						        <option value="18,2">18:30</option>
						        <option value="19,1">19:00</option>
						        <option value="19,2">19:30</option>
						        <option value="20,1">20:00</option>
						        <option value="20,2">20:30</option>
						        <option value="21,1">21:00</option>
						        <option value="21,2">21:30</option>
						        <option value="22,1">22:00</option>
						        <option value="22,2">22:30</option>
						        <option value="23,1">23:00</option>
						        <option value="23,2">23:30</option>
						        <option value="24,1">24:00</option>
						    </select>
				        </div>
				     </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">团队</label>
				    <div class="layui-input-block">
				      	<select name="fkTeam" id="fkTeam" lay-filter="fkTeam" lay-verify="fkTeam">
					    </select>
					    <span style="color: rgb(153, 153, 153); font-size: 12px; padding: 4px 0px 0px;">可以选择团队，来宾请直接输入姓名和电话</span>
				    </div>
				</div>
				<div class="layui-form-item" id="teamStaff">
				    <label class="layui-form-label">员工</label>
				    <div class="layui-input-block">
				      	<select name="staff" id="staff" lay-filter="staff" lay-verify="staff">
					    </select>
					    <span style="color: rgb(153, 153, 153); font-size: 12px; padding: 4px 0px 0px;">可以选择团队，来宾请直接输入姓名和电话</span>
				    </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label"><span class="must-fill">*</span>联系人</label>
				    <div class="layui-input-block">
				      	<input type="text" name="Contacts" id="Contacts" lay-verify="Contacts" placeholder="" autocomplete="off" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label"><span class="must-fill">*</span>联系电话</label>
				    <div class="layui-input-block">
				      	<input type="text" name="telephone" id="telephone" lay-verify="telephone" placeholder="" autocomplete="off" class="layui-input">
				      	
				    </div>
				</div>
			</fieldset>
			<fieldset class="fieldset">
				<div class="layui-form-item" style="">
				    <div class="layui-input-block">
				      <button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">提交</button>
				      <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
				    </div>
				</div>
			</fieldset>
		</form>	
	</div>
</div>
</body>
<script>
$(function(){
	initTime();
	layui.config({
	        base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
	    }).extend({
	        formSelects: 'formSelects-v3'
	    }).use(['element',"layer","form",'formSelects', 'laydate'], function(){
			var layer=layui.layer,form = layui.form,formSelects = layui.formSelects,laydate = layui.laydate;
			//日期
			laydate.render({
			  elem: '#bookDate'
			});
			form.on('select(fkTeam)', function(data){
				$("#teamStaff").show();
				initFormSelects("staff","/app/customerStaff/selectjson/"+data.value,"");
			});
			form.on('select(staff)', function(data){
				
				$.post("/app/customerStaff/selStaff/"+data.value, function(result) {
					console.log(result)
					$("#Contacts").val(result.name);
					$("#telephone").val(result.phone);
					
				}, 'json');
			});
			form.verify({
				start: function(value, item){ //value：表单的值、item：表单的DOM对象
					$("#startTime").val(formatTime2(value));
			  }
				,end: function(value, item){ //value：表单的值、item：表单的DOM对象
			       	$("#endTime").val(formatTime2(value));
			  },Contacts: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	  if(value==""){
			       	  return '联系人不能为空';
			      }
			  },telephone: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	  if(value==""){
			       	  return '手机不能为空';
			      }
			  }
			  
			}); 
			//监听提交
			  form.on('submit(formEmployee)', function(data){
				  var fieldId=$("#fkField").val();
				  var bookDate=$("#bookStartDate").val();
				  var startTime=formatTime2($("#start").val());
				  var endTime=formatTime2($("#end").val());
				  
				  var url="/app/projectFieldTeam/selectFieldCount";
					jQuery.ajax({
				        type:"post",
				        async:false,
				        url:url,
				        data:{'params[fieldId]':fieldId,'params[bookDate]':bookDate,'params[startTime]':startTime,'params[endTime]':endTime},
				        success:function(res){
				        	if(res>0){
				        		layer.msg("此时间段已有预约，请预约其他时间！");
				        	}else{
				        		$.post($("#defaultForm").attr('action'), data.field, function(result) {
									window.parent.layer.msg(result.msg);
									closeLayer();
								}, 'json');
				        	}
				        }
				    })
					return false;
			  });
			
		});
})
function initTime(){
	var bodyInside=$('.iframe-wrap',window.parent.document).children("iframe").contents().find('#iframeSet-wrap');
	var day=$(bodyInside).children("iframe").contents().find('#bookDate').val(),
	startTime=$(bodyInside).children("iframe").contents().find('#startTime').val(),
	endTime=$(bodyInside).children("iframe").contents().find('#endTime').val();
	$("#startTime").val(startTime);
	$("#endTime").val(endTime)
	var sTime=formatTime(startTime),eTime=formatTime(endTime);
	$('#bookStartDate').val(day);
	$("#start").val(sTime);
	$("#end").val(eTime)
}
//18:30---------->18,1
function formatTime(time){
	var time=time.replace(":",","),
	time=time.replace('30',"2"),
	time=time.replace('00',"1");
	return time;
}
//18,1---------->18:30
function formatTime2(time){
	var time0=time.split(",")[0];
	var time1=time.split(",")[1],
	time1=time1.replace('2',"30"),
	time1=time1.replace('1',"00");
	return time0+":"+time1;
}
</script>
</html>